import React, { ReactElement } from 'react'
import { observer } from '@formily/reactive-react'
import { obs } from '@/store'

import Item from './Item'
import less from './style.module.less'

export default observer((): ReactElement => {

  return (
    <>
      <ul
        className={less.list}
        style={{ display: obs.todos.length ? 'block' : 'none' }}>
        {
          obs.todos.map(item => {
            return (
              <Item key={item.id} {...item} />
            )
          })
        }
      </ul>
      <div
        className={less.empty}
        style={{ display: obs.todos.length ? 'none' : 'block' }}>
        <span>Empty ...</span>
      </div>
    </>
  )
})
